<template>
  <div>
    <section class="floor-sec" v-for="item in floordata" :key="item.name">
      <article class="floor-sec-article">
        <div class="title-left">
          <!-- <h4>{{item.floor_title.name}}</h4> -->
          <img :src="item.floor_title.image_src" alt="">
        </div>
        <ul>
          <li v-for="product in item.product_list"
          :key="product.name"
          class="product-li"
          >
            <img :src="product.image_src" alt="">
          </li>
        </ul>
      </article>
    </section>
  </div>
</template>

<script>
export default {
  name: 'HomeFloor',
  props: {
    floordata: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.floor-sec{
  .floor-sec-article{
    overflow: hidden;
    width: 98%;
    // padding: 10px;
    border: 1px solid rgb(218, 218, 218);
    border-radius: .6rem;
    box-shadow: 5px 5px 8px rgb(207, 207, 207);
    margin: .6rem 1%;
  }
  .title-left{
    padding-top: .5rem;
    img{
      width: 100%;
    }
  }
  .floor-sec-article ul{
    width: 100%;
    .product-li{
      float: left;
      width: 33.33%;
    //  后四张图片
      &:nth-last-child(-n+4){
        img{
          height: 33.33vw * 380 / 232 / 2;
        }
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
